<script setup>
import { onMounted, getCurrentInstance } from 'vue'
import MapToolbar from "../maptoolbar/mapToolbar.vue";
import { addTDTLayer } from './map'

import Reset from "../reset/reset.vue";
import Fullscreen from "../fullscreen/fullscreen.vue";
import TwoThreeD from "../2d3d/2d3d.vue";
import Layer from "../layer/layer.vue";
import Distance from "../distance/distance.vue";
import Fly from "../fly/fly.vue";
import Mark from "../mark/mark.vue";
import Areas from "../area/area.vue";
import { getAxios } from '@/api/global'


const { appContext } = getCurrentInstance()
let global = appContext.config.globalProperties

let viewer = null
let markDataSource = null

onMounted(() => {
  setMap()
})

const setMap = () => {
  viewer = new Cesium.Viewer('cesiumContainer', {
    animation: false, // 是否显示动画控件
    baseLayerPicker: false, // 是否显示图层选择控件
    fullscreenButton: false, // 是否显示全屏按钮控件
    vrButton: false, // 是否显示vr按钮控件
    geocoder: false, // 是否显示地名查找控件
    homeButton: false, // 是否显示主页按钮控件
    infoBox: false, // 是否显示点击要素之后显示的信息
    sceneModePicker: false, // 是否显示投影方式控件
    selectionIndicator: false, // 是否获取选择周指示器
    timeline: false, // 是否显示时间线控件
    navigationHelpButton: false, // 是否显示帮助信息控件
    useBrowserRecommendedResolution: false, // 是否以浏览器建议的分辨率渲染
    imageryProvider: false,
    shouldAnimate: true,
  })

  viewer.scene.globe.depthTestAgainstTerrain = false
  viewer.scene.primitives.destroyPrimitives = false
  viewer.scene.postProcessStages._fxaa.enabled = true
  viewer.scene.screenSpaceCameraController.enableCollisionDetection = true

  //去cesium logo水印 或 css
  viewer.cesiumWidget.creditContainer.style.display = "none";

  global.$viewer = viewer

  addzhezhou()

  const imageLayer = addTDTLayer(
    viewer,
    window.baseLayerConfig[0].layerData[0].url
  )

  const zjBaseLayer = addTDTLayer(
    viewer,
    window.baseLayerConfig[0].layerData[1].url
  )
  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(
      window.mapPosition.lon,
      window.mapPosition.lat,
      window.mapPosition.height
    ), //设置位置
    orientation: {
      heading: Cesium.Math.toRadians(window.mapPosition.heading),
      pitch: Cesium.Math.toRadians(window.mapPosition.pitch),
      roll: 0,
    },
  })
}

const addzhezhou = async () => {
  const res = await getAxios('data/株洲区域范围.json')
  let geojsonRead = new Cesium.Geojson()
  geojsonRead.read(res);

  addMaskingOut(geojsonRead.polygonArray[0])
}

const addMaskingOut = (arr) => {
  let positionsArr = [
    {
      positions: Cesium.Cartesian3.fromDegreesArrayHeights(arr.geometry.pts)
    }
  ]

  markDataSource = new Cesium.CustomDataSource("inverseShade");
  viewer.dataSources.add(markDataSource);
  markDataSource.entities.add({
    parentId: 'maskingOut',
    polygon: {
      hierarchy: {
        //左下左上右上右下
        // 对应经纬度[-0,60],[-0,-60],[-180,-60],[-180,60],[-0,60]
        positions: [
          {
            x: 3197104.586923899,
            y: -0.5580000157243585,
            z: 5500477.1339386385,
          },
          {
            x: 3197104.586923899,
            y: -0.5580000157243585,
            z: -5500477.1339386385,
          },
          {
            x: -3197104.5869239476,
            y: -3.915323898915733,
            z: -5500477.1339386385,
          },
          {
            x: -3197104.5869239476,
            y: -3.915323898915733,
            z: 5500477.1339386385,
          },
          {
            x: 3197104.586923899,
            y: -0.5580000157243585,
            z: 5500477.1339386385,
          },
        ]
      },
      // 填充的颜色，withAlpha透明度
      material: Cesium.Color.fromCssColorString("#07132E").withAlpha(0.7),
      // 是否被提供的材质填充
      fill: true,
      // 是否显示
      show: true,
      // 顺序,仅当`clampToGround`为true并且支持地形上的折线时才有效。
      zIndex: 10,
    },
  });

  markDataSource.entities.add({
    parentId: 'maskingOut',
    polygon: {
      // 获取指定属性（positions，holes（图形内需要挖空的区域））
      hierarchy: {
        //左下左上右上右下
        // 对应经纬度[0,60],[0,-60],[180,-60],[180,60],[0,60]
        positions: [
          {
            x: 3197104.586923899,
            y: 0.5580000157243585,
            z: 5500477.1339386385,
          },
          {
            x: 3197104.586923899,
            y: 0.5580000157243585,
            z: -5500477.1339386385,
          },
          {
            x: -3197104.5869239476,
            y: 3.915323898915733,
            z: -5500477.1339386385,
          },
          {
            x: -3197104.5869239476,
            y: 3.915323898915733,
            z: 5500477.1339386385,
          },
          {
            x: 3197104.586923899,
            y: 0.5580000157243585,
            z: 5500477.1339386385,
          },
        ],
        holes: positionsArr
      },
      // 填充的颜色，withAlpha透明度
      material: Cesium.Color.fromCssColorString("#07132E").withAlpha(0.7),

      // material: Cesium.Color.fromCssColorString("#808080").withAlpha(0.8),
      // 是否被提供的材质填充
      fill: true,
      // 是否显示
      show: true,
      // 顺序,仅当`clampToGround`为true并且支持地形上的折线时才有效。
      zIndex: 30,
      // clampToGround: true
    }
  });

  positionsArr.forEach((item, i) => {
    markDataSource.entities.add({
      parentId: 'maskingOut',
      polyline: {
        positions: item.positions,
        width: 15,
        material: new Cesium.PolylineGlowMaterialProperty({
          glowPower: 0.3,
          color: Cesium.Color.fromCssColorString("#00DAFF").withAlpha(0.9),
        }),
        zIndex: 20,
        // clampToGround: true
      }
    });
  })

}
</script>
<template>
  <div class="layout-page">
     
    <div id="cesiumContainer" class="fullSize"></div>
    <MapToolbar
      style="position: absolute; right: 26rem; top: 6rem"
    ></MapToolbar>
    <div style="position: absolute; right:32rem; top: 94px">
      <Reset></Reset>
      <Fullscreen></Fullscreen>
      <TwoThreeD></TwoThreeD>
      <Layer></Layer>
      <Distance></Distance>
      <Fly></Fly>
      <Mark></Mark>
      <Areas></Areas>
    </div>
  </div>
</template>

<style lang="less">
.fullSize {
  width: 100%;
  height: 100%;
}

.layout-page {
  width: 100%;
  height: 100%;
}
</style>
